<template>
  <div>
    <!-- top--导航 -->
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="back"
      fixed="true"
    >
      <template #right>
        <van-icon name="chat-o" size="22" />
      </template>
    </van-nav-bar>
    <!-- 图片 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image.images" />
      </van-swipe-item>
    </van-swipe>
    <ul class="menu_img">
      <li v-for="(item, index) in menu" :key="index">
        <a href="">
          <img :src="item.images" alt="" />
        </a>
      </li>
    </ul>
    <!-- 选项卡 -->
    <van-tabs @click="handleChoose">
      <van-tab
        v-for="(item, index) in good_content"
        :key="index"
        :title="item.text"
      >
        <!-- 根据选项卡渲染内容 -->
        <div class="good_content">
          <van-card
            v-for="(item, index) in good_item"
            :key="index"
            tag="周期配送"
            :price="item.cheap_price"
            :title="item.subject"
            :thumb="item.photo"
            :origin-price="item.sale_price"
          >
            <template #tags>
              <van-tag plain type="danger">{{
                item.subscription_label
              }}</van-tag>
            </template>
            <template #footer>
              <router-link :to="`/detail/${item.gid}`">
                <van-button size="mini">去订购</van-button>
              </router-link>
            </template>
          </van-card>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getOrderTopic } from "@/api/orderTopic.js";
import { getOrderTab } from "@/api/orderIndex.js";
export default {
  // props: {
  //   fixed: {
  //     type: Boolean,
  //     default:true
  //   },
  // },
  data() {
    return {
      title: null,
      images: null, //大图
      menu: null, //图片菜单
      good_content: null, //食物分类
      good_item: null, //商品信息
    };
  },
  created() {
    getOrderTopic(2021).then((res) => {
      //   console.log(res);
      this.title = res.data.title;
      //大图
      this.images = res.data.data[0].body.content;
      //图片菜单
      this.menu = res.data.data[1].body.content;
      //食物分类
      this.good_content = res.data.data[2].body.content;
      //   console.log(res.data.data[2].body.content);
    });
    getOrderTab(0).then((res) => {
      this.good_item = res.data.data[0].body.content.list;
    });
  },

  methods: {
    handleChoose(name) {
      //name是组件下标，通过下标获取不同的数据
      // console.log(name);
      // console.log(title);
      getOrderTab(name).then((res) => {
        // console.log(res);
        // console.log(res.data.data[0].body.content.list);
        this.good_item = res.data.data[0].body.content.list;
      });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style src='@/assets/css/orderTopic.css'>
</style>